<template>
  <div>
    <!-- 头部组件 -->
    <Header />
    <!-- 搜索框组件 -->
    <van-search v-model="value" shape="round" background="rgba(0,0,0,0)" placeholder="请输入搜索关键词" />
    <!-- 轮播图组件 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="obj in banner" :key="obj.id" >
        <img :src="obj.pic" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 分类图标组件 -->
    <van-grid  class="my-grid" :column-num="4" :border=false>
      <van-grid-item  icon="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507833762406601.png" text="排行" to="/" :border=false  />
      <van-grid-item icon="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507837791613116.png" text="分类" url="/vant/mobile.html" />
      <van-grid-item icon="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507835520170135.png" text="有声书" to="/" />
      <van-grid-item icon="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6177e818e4f145001134fe8f/61ea5ddc1fe15f00122d0a34/16427507839612332489.png" text="会员享" url="/vant/mobile.html" />
    </van-grid>
    <!-- 猜你喜欢组件 -->
    <PlaylistTable :list="djList" :cellName="PlaylistTableCellName"/>

  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import PlaylistTable from '../../components/PlaylistTable.vue'
import { djBannerAPI, djLikeAPI } from '@/api'
export default {
  name: 'videoPage',
  components: { Header, PlaylistTable },
  data () {
    return {
      value: '',
      banner: [],
      djList: [],
      PlaylistTableCellName: '猜你喜欢'
    }
  },
  async created () {
    const res = await djBannerAPI({
      limit: 5
    })
    this.banner = res.data.data

    const res2 = await djLikeAPI({
      limit: 6
    })
    console.log(res2)
    this.djList = res2.data.djRadios
  }
}
</script>

<style lang="scss" scoped>
.my-swipe {
  margin: 0 10px 0 10px;
  border-radius: 15px;
  .van-swipe-item {
      width: 100%;
      height: 130px;
      position: relative;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
  }
  img{
    width: 100%;
  }
}
.van-grid-item{
  /deep/.van-grid-item__content{

    background-color: rgba(0, 0,0,0);
  }
  /deep/.van-grid-item__text{
    color: #540bd4;
  }
}
</style>